<template>
  <div class="app-container"
       v-loading="loading">
    <div class="course-add">
      <div class="add-box">
        <div class="close"
             @click="closePage">
          <svg-icon icon-class="close" />
        </div>
        <el-form ref="courseParam"
                 :rules='courseParamRules'
                 :label-position="labelPosition"
                 label-width="80px"
                 :model="courseParam">
          <el-form-item label="服务器"
                        prop="serverPlace"
                        v-if="$route.query.type==='1'">
            <el-radio-group v-model="courseParam.serverPlace">
              <el-radio label="1"
                        border>国内服务器</el-radio>
              <el-radio label="2"
                        border>海外服务器</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="服务器"
                        v-else>
            <div v-if="$route.query.serverPlace ==='1'">
              国内服务器
            </div>
            <div v-else>
              国外服务器
            </div>
          </el-form-item> -->
          <el-form-item label="课程名称"
                        prop="courseName">
            <el-input v-model="courseParam.courseName"
                      placeholder="请输入课程名称，最多100字符"></el-input>
          </el-form-item>
          <el-form-item label="文字稿"
                        prop="note">
            <el-input type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      v-model="courseParam.note"
                      placeholder="请输入文字稿，最多500字符"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="课程类别"
                            prop="categoryId">
                <el-select v-model="courseParam.categoryId"
                           placeholder="请选择类别"
                           clearable>
                  <el-option v-for="item in categoryOptions"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="角标（可选）"
                            prop="cornerMarker">
                <el-select v-model="courseParam.cornerMarker"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="item in markerOptions"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20"
                  class="load-margin">
            <el-col :span="4">
              <div class="from-item__label from-item__required">课程背景图:</div>
            </el-col>
            <el-col :span="6">
              <div v-if="!courseParam.bgImage">
                <base-upload :fileSize="'500'"
                             @BgImageFun="handleBgImage"></base-upload>
              </div>
              <div v-else>
                <img :src="courseParam.bgImage"
                     alt=""
                     style="width:140px" />
                <el-button type="text"
                           @click="courseParam.bgImage = ''">重传</el-button>
              </div>
              <div class="img-tips">
                尺寸:1125x630, 小于500KB
              </div>

            </el-col>
            <el-col :span="6">
              <div style="position: relative;">
                <div class="el-form-item__error"
                     v-if="bgIsNone">
                  请上传课程背景
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20"
                  class="load-margin">
            <el-col :span="4">
              <div class="from-item__label">徽章:</div>
            </el-col>
            <el-col :span="6">
              <base-upload :fileSize="'500'"
                           @BadgeIconFun="handleBadgeIcon"
                           v-if="!courseParam.badgeIcon"></base-upload>
              <div v-else>
                <img :src="courseParam.badgeIcon"
                     alt=""
                     style="max-width:140px" />
                <el-button type="text"
                           @click="courseParam.badgeIcon = ''">重传</el-button>
              </div>
              <div class="img-tips">
                尺寸:132x132, 小于500KB
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20"
                  class="load-margin">
            <el-col :span="4">
              <div class="from-item__label from-item__required">测试题:</div>
            </el-col>
            <el-col :span="6">
              <base-upload :fileSize="'500'"
                           :fileType="'file'"
                           @ExcelFun="handleExcel"
                           :listType="'text'"
                           v-if="!courseParam.examName"></base-upload>
              <div v-else>
                {{ courseParam.examName }}
                <el-button type="text"
                           @click="clearExam">重传</el-button>
              </div>
              <div class="img-tips">
                文件:小于500KB
              </div>
            </el-col>
            <el-col :span="6">
              <div style="position: relative;">
                <div class="el-form-item__error"
                     v-if="excelIsNone">
                  请上传课测试题
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="course-add-bottom">
        <el-button type="primary"
                   plain
                   @click="resetForm('courseParam')">清除</el-button>
        <el-button type="primary"
                   @click="submitCourseUp('courseParam')">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getManagerCourse,
  getCourseAdd,
  getCourseEdit,
  getCourseCategory,
} from '@/api/table'
import BaseUpload from '@/components/Upload/BaseUpload'
export default {
  data() {
    return {
      labelPosition: 'top',
      loading: true,
      courseParam: {
        courseName: '',
        categoryId: '',
        note: '',
        examName: '',
        excelExam: '',
        cornerMarker: '',
        bgImage: '',
        badgeIcon: '',
        serverPlace: '',
      },
      bgIsNone: false,
      excelIsNone: false,
      categoryOptions: [],
      markerOptions: [
        {
          value: '1',
          label: '最新',
        },
        {
          value: '2',
          label: '最热',
        },
      ],
      fileList: [],
      courseParamRules: {
        serverPlace: [
          {
            required: true,
            message: '请选择服务器',
            trigger: 'change',
          },
        ],
        // note: [
        //   {
        //     required: true,
        //     message: '请输入文字稿',
        //     trigger: 'blur',
        //   },
        // ],
        categoryId: [
          {
            required: true,
            message: '请选择课程类别',
            trigger: 'change',
          },
        ],
        courseName: [
          {
            required: true,
            message: '请输入课程名',
            trigger: 'blur',
          },
          { max: 300, message: '字数不超过300字', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    this.CourseCategory()
    if (this.$route.query.type === '2') {
      this.managerCourse()
    } else {
      this.loading = false
    }
  },
  components: {
    BaseUpload,
  },
  methods: {
    async CourseCategory() {
      const category = await getCourseCategory()
      const cateoryType = category.result
      this.categoryOptions = []

      cateoryType.forEach((cateory, index) => {
        const data = {}
        data.value = cateory.categoryId.toString()
        data.label = cateory.zhName
        this.categoryOptions.push(data)
      })
    },
    async managerCourse() {
      const res = await getManagerCourse({
        courseSeq: this.$route.query.seq,
        serverPlace: this.$route.query.serverPlace,
      })
      this.loading = false
      const data = res.result.list[0]
      this.courseParam.courseId = data.id
      this.courseParam.courseName = data.courseName
      this.courseParam.note = data.note
      data.serverPlace
        ? (this.courseParam.serverPlace = data.serverPlace.toString())
        : (this.courseParam.serverPlace = '')
      data.categoryId
        ? (this.courseParam.categoryId = data.categoryId.toString())
        : (this.courseParam.categoryId = '')
      data.cornerMarker
        ? (this.courseParam.cornerMarker = data.cornerMarker.toString())
        : (this.courseParam.cornerMarker = '')
      this.courseParam.bgImage = data.bgImage
      this.courseParam.badgeIcon = data.badgeIcon
      this.courseParam.excelExam = data.excelExam
      this.courseParam.examName = data.examName
    },
    submitCourseUp(formName) {
      if (!this.courseParam.bgImage) {
        this.bgIsNone = true
      } else {
        this.bgIsNone = false
      }
      if (!this.courseParam.excelExam) {
        this.excelIsNone = true
      } else {
        this.excelIsNone = false
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$route.query.type === '1') {
            this.courseUp()
          } else {
            this.courseEdit()
          }
        } else {
          return false
        }
      })
    },
    async courseUp() {
      const res = await getCourseAdd({
        courseName: this.courseParam.courseName,
        categoryId: this.courseParam.categoryId,
        note: this.courseParam.note,
        examName: this.courseParam.examName,
        excelExam: this.courseParam.excelExam,
        cornerMarker: this.courseParam.cornerMarker,
        bgImage: this.courseParam.bgImage,
        badgeIcon: this.courseParam.badgeIcon,
        serverPlace: this.courseParam.serverPlace,
      })
      this.$message({
        message: '提交成功',
        type: 'success',
      })
      this.editVideo(res.result)
    },
    async courseEdit() {
      if (this.courseParam.badgeIcon) {
        if (this.courseParam.badgeIcon.indexOf('http') === 0) {
          this.courseParam.badgeIcon = null
        }
      }
      if (this.courseParam.bgImage) {
        if (this.courseParam.bgImage.indexOf('http') === 0) {
          this.courseParam.bgImage = null
        }
      }
      const res = await getCourseEdit({
        courseName: this.courseParam.courseName,
        categoryId: this.courseParam.categoryId,
        note: this.courseParam.note,
        examName: this.courseParam.examName,
        excelExam: this.courseParam.excelExam,
        cornerMarker: this.courseParam.cornerMarker,
        bgImage: this.courseParam.bgImage,
        badgeIcon: this.courseParam.badgeIcon,
        serverPlace: this.courseParam.serverPlace,
        courseId: this.courseParam.courseId,
      })
      this.$message({
        message: '提交成功',
        type: 'success',
      })
      this.$router.push({ path: '/courselist' })
    },
    resetForm(formName) {
      this.courseParam.bgImage = ''
      this.courseParam.badgeIcon = ''
      this.courseParam.excelExam = ''
      this.$refs[formName].resetFields()
    },
    editVideo(data) {
      this.$router.push({
        path: 'courseVideo',
        query: {
          seq: data.courseSeq,
          serverPlace: data.serverPlace,
          courseId: data.id,
        },
      })
    },
    closePage() {
      this.$router.go(-1)
    },
    handleBgImage(data) {
      this.courseParam.bgImage = data.backData.imgUrl
    },
    handleBadgeIcon(data) {
      this.courseParam.badgeIcon = data.backData.imgUrl
    },
    handleExcel(data) {
      this.courseParam.excelExam = data.backData.imgUrl
      this.courseParam.examName = data.backData.name
    },
    clearExam() {
      this.courseParam.examName = ''
      this.courseParam.excelExam = ''
    },
  },
  watch: {
    'courseParam.bgImage': function () {
      this.bgIsNone = false
    },
    'courseParam.excelExam': function () {
      this.excelIsNone = false
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background: #fff;
}
.img-tips {
  font-size: 12px;
  color: #606266;
  margin-top: 7px;
}
.course-add {
  height: 90%;
  position: relative;
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 20px;
    background: #fff;
    z-index: 100;
    cursor: pointer;
  }
  .add-box {
    background: #fff;
    height: 100%;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 2px 3px 10px 2px #999;
    overflow: scroll;
  }
  .load-margin {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .course-add-bottom {
    margin-top: 30px;
    text-align: center;
  }
  .from-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0 0 10px;
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 700;
  }
  .from-item__required:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
}
</style>

